<template>
    <div class="setting-feedback">
      <Header class="feedback-title" to='/personal' title="意见反馈"></Header>
      <p>请选择你想反馈的问题点</p>
      <div class="feedback-point">
          <el-checkbox-group v-model="checkList"></el-checkbox-group>
        <br>
        <el-radio v-model ="type" label="功能">功能异常：功能故障或不可用</el-radio>
        <br>
        <el-radio v-model ="type" label="产品">产品建议：用的不爽，我有建议</el-radio>
        <br>
        <el-radio v-model ="type" label="安全">安全问题：密码、隐私等</el-radio>
        <br>
        <el-radio v-model ="type" label="其他">其他问题</el-radio>
          <!-- <el-checkbox-group v-model="checkList">
              <el-checkbox label="功能">功能异常：功能故障或不可用</el-checkbox>
              <el-checkbox label="产品">产品建议：用的不爽，我有建议</el-checkbox>
              <el-checkbox label="安全">安全问题：密码、隐私等</el-checkbox>
              <el-checkbox label="其他">其他问题</el-checkbox>
          </el-checkbox-group> -->
          <!-- </el-checkbox-group>
          </el-checkbox-group> -->
      </div>
      <p>请补充详细问题和意见</p>
      <div class="feedback-textear">
          <textarea class="feedback-textear-msg" placeholder="请输入不少于十个字的描述" v-model="text" cols="30" rows="10"></textarea>
      </div>
      <div class="feedback-submit">
          <el-button type="text" @click="feedbackOpen()">提交</el-button>
      </div>
      <div class="feedback-prompt" v-if="this.appear">
          <span>{{message}}</span>
      </div>
    </div>
</template>

<script>
import Header from '../common/Header'
import qs from 'qs'
import { getLocalStorage } from '../../utils/localStorage'

export default {
  components: {
    Header
  },
  data () {
    return {
      appear: false,
      type: '功能',
      checkList: [''],
      text: '',
      message: '请输入不少于10个字的描述'
    }
  },
  methods: {
    feedbackOpen () {
      let listLenght = this.checkList.length
      let textLenght = this.text.length
      if (textLenght <= 10) {
        this.appear = true
        if (listLenght < 1) {
          this.message = '请选择想反馈的问题'
        }
        setTimeout(() => {
          this.appear = false
        }, 2000)
      } else {
        let sessionId = getLocalStorage('sessionId')
        let data = qs.stringify({
          type: this.type,
          text: this.text
        })
        if (!sessionId) {
          this.$message({
            message: '请登录后再提交反馈',
            type: 'warning'
          })
          return
        }
        // 确定登录发送请求
        this.$axios.post('/feedback', data, {headers: {'sessionId': sessionId}})
          .then((res) => {
            this.$message({
              message: '反馈提交成功',
              type: 'success'
            })
            setTimeout(() => {
              this.appear = false
              this.$router.push('/personal')
            }, 2000)
          }).catch((error) => {
            this.$message({
              message: '请求发送失败，请稍后重试',
              type: 'warning'
            })
            console.log(error)
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global";
.setting-feedback {
    width: 100%;
    position: relative;
    .feedback-title {
        background: white;
    }
    p {
        padding-left: 12px;
        height: 40px;
        line-height: 40px;
        color: #555;
    }
    .feedback-point {
        .el-checkbox {
            display: block;
            padding-left: 12px;
            background: white;
            color: #000;
            height: 52px;
            line-height: 52px;
            font-size: 12px;
        }
      padding: 0 20px;
      background: #fff;
      .el-radio {
        margin: 15px 0;
      }
    }
    .feedback-textear {
        width: 100%;
        .feedback-textear-msg {
            width: 100%;
            color: #000;
            border: 1px solid white;
            font-size: 14px;
            letter-spacing: 2px;
        }
    }
    .feedback-submit {
        width: 90%;
        margin: 0 auto;
        background: #409eff;
        text-align: center;
        margin-top: 22px;
        border-radius: 6px;
        .el-button {
            color: white;
            letter-spacing: 4px;
            font-size: 16px;
        }
    }
    .feedback-prompt {
      display: block;
      background: #000;
      color: white;
      opacity: 0.4;
      width: 170px;
      height: 56px;
      line-height: 56px;
      border-radius: 10px;
      text-align: center;
      position: absolute;
      top: 270px;
      left: 100px;
    }
}
</style>
